import Vue from 'vue'

// 自定义事件: 文本框自动获得焦点
Vue.directive('myfocus', {
  // inserted: 指令所在dom被创建为真实dom是会触发一次
  // 如果指令用在原生标签上, el就是原生DOM对象
  // 如果指令用在组件上, el就是当前组件的 根元素 (root element)
  inserted (el, binding) {
    // 1. el是input或文本域,普通标签
    if (['INPUT', 'TEXTAREA'].includes(el.nodeName)) { return el.focus() }

    // 2. el是组件,尝试找子元素有没有input或文本域
    let node = el.querySelector('input')
    if (node) { return node.focus() }

    node = el.querySelector('textarea')
    if (node) { return node.focus() }

    // 没有找到
    throw new Error('该指令只能使用在input或textarea上')
  }
})
